<template><!--首页主页组件-->
  <div class="index-wrap">
       <div class="index-left">
         <div class="index-left-block">
           <h2>全部产品</h2>
           <template v-for="product in productList">
             <h3>{{product.title}}</h3>
             <ul>
               <li v-for="item in product.list">
                 <a :href="item.url">{{item.name}}</a>
                 <span v-if="item.hot" class="hot-tag">HOT</span>
               </li>
             </ul>
            <div v-if="!product.last" class="hr"></div>
           </template>
         </div>
         <div class="index-left-block lastest-news">
           <h2>最新消息</h2>
           <ul>
             <li v-for="item in newsList">
               <a href="item.url" class="new-item">{{item.title}}</a>
             </li>
           </ul>
         </div>
       </div>
       <div class="index-right">
       <slideShow :slides="slides" :inv="invTime" @onchange="onChangeSlideIndex"></slideShow>
         <div class="index-board-list">
           <div class="index-board-item"
           v-for="(item,index) in boardList"
           :class="[{'line-last' :index % 2 !==0},'index-board-'+item.id]">
           <div class="index-board-item-inner">
             <h2>{{item.title}}</h2>
             <p>{{item.description}}</p>
             <div class="index-board-button">
               <a href="" class="button">立即购买</a>
             </div>
           </div>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import slideShow from '../components/slideShow'
export default {
components:{
      slideShow /*轮播图*/
},
  created:function(){
    this.$http.get('api/getNewsList').then(
      (res) => this.newsList = res.data,
      (err) => {console.log(err)}
      )
  },methods: {
    onChangeSlideIndex(){
       console.log('onChangeSlideIndex')
    }
  },
  data(){
    return{
      invTime:2000,
      slides:[
      {
        src:require('../assets/slideShow/pic1.jpg'),
        title:'数据统计',
        href:'detail/analysis' 
      },
      {
        src:require('../assets/slideShow/pic2.jpg'),
        title:'数据预测',
        href:'detail/count'
      },
      {
        src:require('../assets/slideShow/pic3.jpg'),
        title:'流量分析',
        href:'detail/publish'
      },
      {
        src:require('../assets/slideShow/pic4.jpg'),
        title:'广告发布',
        href:'detail/forecast'
      }
      ],
       boardList: [
        {
          title: '数据统计',
          description: '是一款开放产品，为您统计用户的大数据',
          id: 'car',
          toKey: 'analysis',
          saleout: false
        },
        {
          title: '品牌营销',
          description: '品牌营销帮助你的产品更好地找到定位',
          id: 'earth',
          toKey: 'count',
          saleout: false
        },
        {
          title: '流量分析',
          description: '流量分析快速迭代永远保持最前端的速度',
          id: 'loud',
          toKey: 'forecast',
          saleout: true
        },
        {
          title: '广告发布',
          description: '良好的宣传效果帮你勇闯高峰到达事业的顶峰',
          id: 'hill',
          toKey: 'publish',
          saleout: false
        }
      ],newsList:[],
      productList:{
        pc:{
          title:'PC产品',
          list:[
            {
              name: '数据统计',
              url: 'detail/count'
            },
            {
              name: '数据预测',
              url: 'detail/forecast'
            },
            {
              name: '流量分析',
              url: 'detail/analysis',
              hot: true
            },
            {
              name: '广告发布',
              url: 'detail/publish'
            }
          ]
        },
        app:{
           title:'手机应用类',
           list:[
            {
              name: '91助手',
              url: 'http://weixin.com'
            },
            {
              name: '产品助手',
              url: 'http://twitter.com',
              hot: true
            },
            {
              name: '智能地图',
              url: 'http://maps.com'
            },
            {
              name: '团队语音',
              url: 'http://phone.com'
            }

           ]
        }
      }
    }
  }
}
</script>

<style lang="css">
.index-wrap {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.index-left {
  float: left;
  width: 300px;
  text-align: left;
}
.index-right {
  float: left;
  width: 900px;
}
.index-left-block {
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
}
.index-left-block .hr {
  margin-bottom: 20px;
}
.index-left-block h2 {
  background: #4fc08d;
  color: #fff;
  padding: 10px 15px;
  margin-bottom: 20px;
}
.index-left-block h3 {
  padding: 0 15px 5px 15px;
  font-weight: bold;
  color: #222;
}
.index-left-block ul {
  padding: 10px 15px;
}
.index-left-block li {
  padding: 5px;
}
.index-board-list {
  overflow: hidden;
}
.index-board-item {
  float: left;
  width: 400px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
  padding: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.index-board-item-inner {
  min-height: 125px;
  padding-left: 120px;
}
.index-board-car .index-board-item-inner{
  background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
  background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
  background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../assets/images/4.png) no-repeat;
}
.index-board-item h2 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}
.line-last {
  margin-right: 0;
}
.index-board-button {
  margin-top: 20px;
}
.lastest-news {
  min-height: 512px;
}
.hot-tag {
  background: red;
  color: #fff;
}

.new-item{             /*新闻列表超出样式*/
  display:inline-block;
  width:230px;
  overflow:hidden;       /*超出隐藏*/
  text-overflow:ellipsis; /*文本超出省略...*/
  white-space: nowrap;    /*不允许换行*/
}


</style>
